<div class="page-title clearfix">
  <div class="title">押金管理</div>
</div>

<div class="panel panel-body">
  <!--搜索 start-->
  <form nz-form (submit)="queryUserDepositList(1)">
    <div class="search-group">
      <span class="search-title">账号：</span>
      <div class="search-main">
        <input nz-input name="account"
               [(ngModel)]="searchParams.account"
               placeholder="请输入用户账号">
      </div>
    </div>
    <div class="inline-block">
      <button nz-button class="ml-20 mr" [nzType]="'primary'" title="搜索" type="submit">
        <i class="anticon anticon-search"></i><span>搜索</span>
      </button>
      <button nz-button class="mr" title="重置" type="reset" (click)="resetSearch()">
        <i class="anticon anticon-sync"></i><span>重置</span>
      </button>
    </div>
  </form>
  <!--搜索 end-->
</div>

<div class="panel">
  <nz-table #nzTable
            [nzData]="userDepositList.voList"
            [nzLoading]="_loading"
            [nzFrontPagination]="false"
            [nzShowTotal]="totalRow"
            [nzPageSize]="userDepositList.pageSize"
            [nzTotal]="userDepositList.totalRow"
            [nzPageIndex]="userDepositList.curPage"
            (nzPageIndexChange)="queryUserDepositList($event)">
    <thead nz-thead>
    <ng-template #totalRow>共 {{userDepositList.totalRow}} 条数据</ng-template>
    <tr>
      <th nz-th class="text-center" nzWidth="5%"><span>序号</span></th><!--序号-->
      <th nz-th class="text-center" nzWidth="15%"><span>账户信息</span></th><!--账户信息-->
      <th nz-th class="text-center" nzWidth="15%"><span>用户姓名</span></th><!--用户姓名-->
      <th nz-th class="text-center" nzWidth="15%"><span>手机号</span></th><!--手机号-->
      <th nz-th class="text-center" nzWidth="10%"><span>用户押金</span></th><!--用户押金-->
      <th nz-th class="text-center" nzWidth="15%"><span>星级</span></th><!--星级-->
      <th nz-th class="text-center" nzWidth="10%"><span>状态</span></th><!--状态：可返还 Returnable，冻结 Frozen，已返还 Returned-->
      <th nz-th class="text-center" nzWidth="15%"><span>返还时间</span></th><!--返还时间 一年以后的时间-->
    </tr>
    </thead>
    <tbody nz-tbody>
    <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
      <tr nz-tbody-tr>
        <td nz-td class="text-center">{{i+1}}</td>
        <td nz-td class="text-center">{{data.user?.account}}</td>
        <td nz-td class="text-center">{{data.user?.realName}}</td>
        <td nz-td class="text-center">{{data.user?.phone}}</td>
        <td nz-td class="text-center color-red">{{data.deposit}}</td>
        <td nz-td class="text-center">
          <nz-rate [ngModel]="data.starLevel" [nzCount]="7" nzDisabled></nz-rate>
        </td>
        <td nz-td class="text-center font12">
          <nz-badge nzStatus="warning" *ngIf="data.state === userDepositStates.returnable"></nz-badge>
          <nz-badge nzStatus="default" *ngIf="data.state === userDepositStates.frozen"></nz-badge>
          <nz-badge nzStatus="success" *ngIf="data.state === userDepositStates.returned"></nz-badge>
          {{data.state | enumName:userDepositState}}
        </td>
        <td nz-td class="text-center font12">{{data.returnTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
      </tr>
    </ng-template>
    </tbody>
  </nz-table>
</div>
